import { useDispatch, useSelector } from 'react-redux'
import { useEffect } from 'react'
import { getAricleList } from '../store/actions/index'
import { RootState } from '../types/store'
import { Image } from 'antd-mobile'
import avatar from '../assets/back.jpg'
// 文章页面
export const ArticleList = () => {
  const dispatch = useDispatch()
  const list = useSelector((state: RootState) => state.article)
  // 获取文章列表
  useEffect(() => {
    dispatch(getAricleList())
  }, [dispatch])
  return (
    <div className="list">
      {list.map((item) => {
        return (
          <div className="article_item" key={item.art_id}>
            <h3>{item.title}</h3>
            <div className="img_box">
              {/* 图像懒加载 */}
              <Image
                src={item.cover.images?.[0] ? item.cover.images?.[0] : avatar}
                lazy
                className="w100"
                alt=""
              />
            </div>
            <div className="info_box">
              <span>{item.aut_name}</span>
              <span>{item.pubdate}</span>
              <span>{item.aut_id}</span>
            </div>
          </div>
        )
      })}
    </div>
  )
}
